<template>
  <cm-scroll>
    <div style="padding: 20px 20px 0 20px">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        clearable
      ></el-input>
      <el-tree
        :data="categoryList"
        :props="categoryProps"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        class="filter-tree"
        :default-expanded-keys="[defaultExpandKeys]"
        :highlight-current="showTree"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        default-expand-all
      >
      </el-tree>
    </div>
  </cm-scroll>
</template>

<script>
export default {
  name: "leftWorkflowType",
  props: {},
  data() {
    return {
      defaultExpandKeys: "",
      showTree: false,
      filterText: "",
      categoryProps: {
        label: "name",
        value: "id",
        children: "children"
      },
      categoryList: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {},
  mounted() {
    this.getCategoryTree();
  },
  methods: {
    // 过滤分类
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 获取待办任务类型
    getCategoryTree() {
      this.API.getWorkflowCategoryTree({ parentId: 0 }).then(res => {
        this.categoryList = [];
        if (res.data) {
          this.categoryList.push({ name: "全部", id: "", children: res.data });
        }
      });
    },
    // 左侧分类树的单击事件
    handleNodeClick(val) {
      this.$emit("handleNodeClick", val);
    }
  }
};
</script>

<style scoped>
/deep/ .el-tree {
  overflow-x: auto;
}

/deep/ .el-tree-node > .el-tree-node__children {
  overflow: inherit;
}

.filter-tree {
  padding: 10px 0px;
}
</style>
